import React, { FC, ReactElement } from 'react';
import { Card, Row, Col, Space, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { ITodo } from '../typings';

interface IProps {
  todo: ITodo;
  toggleTodo: (id: number) => void;
  removeTodo: (id: number) => void;
}

const TdItem: FC<IProps> = ({
  todo,
  toggleTodo,
  removeTodo
}): ReactElement => {

  const { id, content, completed } = todo;

  return (
    <Card className="todo-item" style={{margin: '10px 0'}}>
      <Row>
        <Col span={20}>
          <Space size={[8, 16]} wrap>
            <input 
              type="checkbox"
              checked={ completed }
              onChange={ () => toggleTodo(id) }
            />
            <span style={{ textDecoration: completed ? 'line-through': 'none'}}>
              { content }
            </span>
            <Button onClick={ () => removeTodo(id) }><CloseOutlined /></Button>
          </Space>
        </Col>
      </Row>
    </Card>
  )
}

export default TdItem
